<template>
	<view class="inviteFriendsWrapper wrapper wd100">
		<swipers :list="swiperList"  height='130' @change="currentChange" />
		<view class="wd100bd pd20">
			<view class="invite-step wd100bd colCen">
				<view class="step-title">
					tips:
				</view>
				<view class="step-list">
					1. 将邀请码或海报分享给好友<br>
					2. 注册成功后,既成为您的粉丝<br>
					未来他/她有购物订单,您可获得佣金奖励,并自动计入您的帐户
				</view>
			</view>
		</view>
		<view class="wd100bd actionbar rowCenBet">
			<view class="btnstyle rowCenCen" @click="sharePic()">
				分享海报
			</view>
			 
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/poster.js'
	import * as UserApi from '@/api/user.js'
	import swipers from './components/swiper'
	export default {
		components: {
			swipers
		},
		data() {
			return {
				current: 0,
				inviteInfo: '',
				swiperList: []
			}
		},
		 onLoad() {
			 this.getPosterList()
		},
		methods: {
			currentChange(current) {
				this.current = current
			},
			sharePic() {
				console.log(this.swiperList);
				uni.previewImage({
					urls: this.swiperList.filter((item, index) => {
						return index == this.current
					}),
					current: 0
				})
			},
			async getPosterList() {
				try {
					let res = await Api.qrcode({})
					console.log(res)
					this.swiperList = res.data.imageUrl
				} catch (e) {
					//TODO handle the exception
				}
			},
			copyText(text) {
				// #ifdef MP-WEIXIN
				let {
					copy_button
				} = this.$store.getters.setting
				
				if (!copy_button) {
					this.$refs.copyPopup.show(text)
					return
				}
				// #endif
				
				uni.setClipboardData({
					data: text,
					success: res => {
						uni.showToast({
							title: '复制成功！',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inviteFriendsWrapper {
		min-height: 100vh;

		.invite-step {
			margin-top: 30rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;

			.step-title {
				width: 100%;
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}

			.step-list {
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
				line-height: 36rpx;
			}
		}

		.actionbar {
			margin-top: 30rpx;
			padding: 0 60rpx;

			.btnstyle {
				width: 630rpx;
				height: 80rpx;
				background: #2D8DFB;
				border-radius: 40rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			.yellowbtn {
				background: #FCDE04;
				color: #333333;
			}
		}

		.infoarea {
			margin-top: 30rpx;
			padding-bottom: 30rpx;

			.whitebox {
				padding: 30rpx;
				background: #FFFFFF;
				border-radius: 20rpx;

				.boldtitle {
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
				}
			}

			.itemtitle {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
				height: 60rpx;
				margin-top: 10rpx;
			}

			.greybar {
				background: #F8F8F8;
				border-radius: 10rpx;
				padding: 15rpx 20rpx;

				.valtxt {
					width: 460rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #333333;
					word-break: break-all;
				}

				.copybtn {
					width: 130rpx;
					height: 50rpx;
					background: #2D8DFB;
					border-radius: 25rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}
</style>